'use client'
import {
    MenuFoldOutlined,
    HomeOutlined,
    PoweroffOutlined,
    MenuUnfoldOutlined,
    FileOutlined,
    DownOutlined,
    UserOutlined,
    BookOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Dropdown, MenuProps, Descriptions, Button } from 'antd';
import type { DescriptionsProps } from 'antd';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation'
import Link from 'next/link';

const { Header, Sider, Content } = Layout;
const User: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const router = useRouter()
    const username = '13207192878';
    const itemDesc: DescriptionsProps['items'] = [
        {
            key: '1',
            label: '用户名',
            children: 'Zhou Maomao',
        },
        {
            key: '2',
            label: '联系电话',
            children: '1810000000',
        },
        {
            key: '3',
            label: '所在城市',
            children: 'Hangzhou, Zhejiang',
        },
        {
            key: '4',
            label: '备注',
            children: 'empty',
        },
        {
            key: '5',
            label: '地址',
            children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
        },
    ];
    function onClick(obj: { key: string }) {
        if (obj.key === '1') {
            // 跳转到官网
        } else {
            // 退出登录
        }
    };
    const onClickMenu: MenuProps['onClick'] = e => {
        if (e.key == '2') {
            // 跳转到文献管理页面
            router.push('/docMgt')
        } else if (e.key == '31') {
            // 跳转到自定义数据集-数据集社区页面
            router.push('/dataClub')
        } else if (e.key == '32') {
            // 跳转到自定义数据集-已选数据集页面
            router.push('/dataChosen')
        }
    };
    const items = [{
        key: '1',
        label: (
            <Link href="https://www.xsjxkt.com">
                <HomeOutlined /><span style={{ marginLeft: 6 }}>回到官网</span>
            </Link>
        ),
    }, {
        key: '2',
        label: (
            <div><PoweroffOutlined /><span style={{ marginLeft: 6 }}>退出登录</span></div>
        ),
    }]
    return (
        <Layout style={{ height: '100%' }}>
            <Sider style={{ backgroundColor: '#f5f5f5' }} trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu style={{ backgroundColor: '#f5f5f5', border: 'none' }}
                    theme="light"
                    onClick={onClickMenu}
                    mode="inline"
                    defaultOpenKeys={['1']}
                    defaultSelectedKeys={['11']}
                    items={[
                        {
                            key: '1',
                            icon: <UserOutlined />,
                            label: '用户信息',
                            children: [
                                {
                                    key: '11',
                                    label: '我的信息',
                                },
                            ]
                        },
                        {
                            key: '2',
                            icon: <BookOutlined />,
                            label: '文献管理',
                        },
                        {
                            key: '3',
                            icon: <FileOutlined />,
                            label: '自定义数据集',
                            children: [
                                {
                                    key: '31',
                                    label: '数据集社区',
                                },
                                {
                                    key: '32',
                                    label: '已选数据集',
                                }
                            ]
                        },
                    ]}
                />
            </Sider>
            <Layout className="site-layout" style={{ backgroundColor: '#fff' }}>
                <Header className="site-layout-background" style={{ backgroundColor: '#f5f5f5', paddingLeft: 12 }}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <div style={{ float: 'right' }}>
                        <Dropdown menu={{ items, onClick }}>
                            <a onClick={e => e.preventDefault()}>
                                <UserOutlined />{username}
                                <DownOutlined style={{ marginLeft: 8 }} />
                            </a>
                        </Dropdown>
                    </div>
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                    }}
                >
                    <Descriptions title="用户信息" items={itemDesc} />
                </Content>
            </Layout>
        </Layout>
    );
};

export default User;